<template>
	<view class="scroll-list">
		<scroll-view scroll-x="true" :style="{height: h + 90 +'rpx',width: '100%',whiteSpace:'nowrap'}">
			<view class="row">
				<block v-for="(item,index) in list">
					<view :style="{width: w+'rpx',marginRight:'10px'}" @click="to(item.id)">
						<image :src="imgExchange(item.img)" :style="{width: w+'rpx',height: h +'rpx'}"></image>
						<text class="txt">{{item.name}}</text>
					</view>
				</block>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import utils from '@/static/js/utils.js'
	export default {
		name: "scroll-list",
		data() {
			return {

			};
		},
		computed: {

		},
		methods: {
			imgExchange(img) {
				// console.log("scroll-list", img)
				return utils.imgExchange(img)
			},
			to(e) {
				// console.log("参数", e)
				this.$emit('scrollClick', e)
			}
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			w: {
				type: Number,
				default: 120
			},
			h: {
				type: Number,
				default: 160
			},

		}
	}
</script>

<style scoped>
	.scroll-list {
		width: 100%;
	}

	.row {
		display: flex;
		flex-direction: row;
	}

	.txt {
		margin-top: 5px;
		text-overflow: clip;
		max-lines: 1;
		overflow: hidden;
		lines: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-align: center;
		font-size: 10px;
	}
</style>
